<template>
  <div class="application-view">
    <div class="details-head">
      <el-breadcrumb slot="breadcrumb">
        <el-breadcrumb-item to="/application">应用</el-breadcrumb-item>
        <el-breadcrumb-item>{{ accessTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="detail-card">
      <el-form
        ref="record"
        label-position="top"
        :model="record"
        :disabled="disabled"
        :rules="disabled ? {} : rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="应用名称" prop="name">
              <el-input v-model="record.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="disabled" :span="12">
            <el-form-item label="密钥" prop="accessKey">
              <el-input v-model="record.accessKey"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="disabled" :span="12">
            <el-form-item label="应用 Token" prop="accessToken">
              <el-input v-model="record.accessToken"></el-input>
            </el-form-item>
          </el-col>

          <el-col v-if="disabled" :span="12">
            <el-form-item label="关联用户" prop="user">
              <el-input v-model="record.user.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="用途" prop="spm">
              <le-select
                v-model.number="record.spm"
                :field="{ key: 'spm' }"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="到期日期" prop="expiredAt">
              <el-date-picker
                v-model="record.expiredAt"
                type="date"
                placeholder="选择到期日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div v-if="!disabled" class="oper-area">
      <el-button type="success" @click="save">保存</el-button>
    </div>
  </div>
</template>


<script>
  import details from '~/mixins/details'

  export default {
    name: 'application-view',
    mixins: [details],
    components: {},
    data() {
      return {
        url: '/application',
        record: {
          user: {},
        },
        rules: {
          'name': [
            {
              'required': true,
              'message': '请填写用途信息',
            },
          ],
          spm: [
            { required: true, message: '请选择用途' },
          ],
          expiredAt: [
            { required: true, message: '请选择到期日期' },
          ],
        },
      }
    },
    methods: {
      beforeSave() {
        if (this.record.expiredAt) {
          this.record.expiredAt = new Date(this.record.expiredAt).getTime()
        }
      },
    },
  }
</script>

<style lang="scss">
  .application-view {
    .el-date-editor {
      width: 100%;
    }
  }
</style>
